.mono{font-family:monospace}.tal{text-align:left}.tar{text-align:right}.tac{text-align:center}.ml10{margin-left:10px}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.hide-text{margin:-1px;padding:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip:rect(0,0,0,0);position:absolute}.bg-red{background-color:red}body{margin:0;padding:0;background-color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,Arial,sans-serif;color:#2c3e50}@keyframes a{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.fadeup-leave{opacity:1}.fadeup-leave-active{animation:a .5s}.fadeup-leave-to{opacity:0}.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter,.fade-leave-to{opacity:0}.spinner,.spinner:after{border-radius:50%;width:30px;height:30px}.spinner{font-size:10px;position:relative;text-indent:-9999em;border-top:5px solid rgba(0,0,0,.1);border-right:5px solid rgba(0,0,0,.1);border-bottom:5px solid rgba(0,0,0,.1);border-left:5px solid #ff512f;transform:translateZ(0);animation:b 1.1s infinite linear}@keyframes b{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}[data-tooltip]{position:relative}[data-tooltip]:after,[data-tooltip]:before{opacity:0;pointer-events:none;transition:all ease-in-outs .18s;position:absolute;z-index:4;transform-origin:top;bottom:auto;left:50%;top:100%;transform:translate(-50%,-10px)}[data-tooltip]:after{background:hsla(0,0%,7%,.9);border-radius:4px;color:#fff;content:attr(data-tooltip);font-size:12px;padding:.5em 1em;white-space:nowrap;margin-top:11px}[data-tooltip]:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E") no-repeat;background-size:100% auto;height:6px;width:18px;margin-top:5px;margin-bottom:0;content:""}[data-tooltip]:hover:after,[data-tooltip]:hover:before,[data-tooltip][data-tooltip-visible]:after,[data-tooltip][data-tooltip-visible]:before{opacity:1;pointer-events:auto;transform:translate(-50%)}.button{border-radius:2px;color:#fff;font-weight:600;padding:0 10px;background-color:#eaeaea;text-decoration:none;height:30px;line-height:30px;font-size:12px;display:flex;align-items:center;justify-content:center;width:140px;transition:background-color .2s ease-in-out}.button span{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.button__icon{width:14px;height:14px;margin-right:5px;fill:#fff}.button--facebook{background-color:#3b5998}.button--facebook:hover{background-color:#344e86}.button--twitter{background-color:#1da1f2}.button--twitter:hover{background-color:#0d95e8}.btn{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;box-sizing:content-box;background-color:#1abc9c;color:#fff;font-weight:700;font-size:12px;text-transform:uppercase;text-decoration:none;padding:15px 25px;border-radius:30px;outline:0!important;border:0;transition:all .2s ease-in-out;cursor:pointer}.btn:hover{background-color:#148f77!important}.burger{display:flex;align-items:center;text-decoration:none;color:#373737;font-size:14px}.burger span{margin-right:5px}.menu{padding-right:0}.menu__icon{position:relative;margin-top:5px;margin-bottom:5px}.menu__icon,.menu__icon:after,.menu__icon:before{display:block;width:20px;height:2px;background-color:#333;border-radius:13px;transition-property:background-color,transform;transition-duration:.25s}.menu__icon:after,.menu__icon:before{position:absolute;content:""}.menu__icon:before{top:-5px}.menu__icon:after{top:5px}.menu.is-active .menu__icon{background-color:transparent!important}.menu.is-active .menu__icon:before{transform:translateY(5px) rotate(45deg)}.menu.is-active .menu__icon:after{transform:translateY(-5px) rotate(-45deg)}.header{background-color:#fff;border-bottom:1px solid #f3f3f3;height:50px;padding-left:20px;padding-right:20px;display:flex;align-items:center;box-sizing:border-box;z-index:3;position:relative;justify-content:center}@media (min-width:620px){.header{justify-content:space-between}}.header__branding{display:flex;align-items:center}.header__logo{width:130px;height:30px;margin-top:-4px}.header__social{list-style-type:none;display:none}@media (min-width:620px){.header__social{display:flex}}.header__github{width:30px;height:30px;fill:#000;display:none}@media (min-width:700px){.header__github{display:block}}.actionbar{background-color:#fff;height:36px;padding:0 20px;display:flex;justify-content:space-between;text-align:left;align-items:center;z-index:3;position:relative;box-shadow:0 1px 4px rgba(0,0,0,.22);padding:0}@media (min-width:700px){.actionbar{padding:0 20px}}.actionbar__section{flex-grow:1;flex-basis:33.333%;margin-top:-2px}.actionbar__section--swatch{display:flex;justify-content:center;flex-basis:100%}.actionbar__left{display:flex}.actionbar__nav{list-style-type:none;margin:0;padding:0;align-items:center;justify-content:flex-end;height:38px;display:none}@media (min-width:700px){.actionbar__nav{display:flex}}.actionbar__nav-item{margin-left:10px;position:relative;height:100%;width:40px;text-align:center}.actionbar__nav-item:not(:first-child):before{content:"|";margin-left:10px;position:absolute;left:-17px;top:9px;color:#eaeaea}.actionbar__nav-link{padding:7px 8px 3px;border-radius:3px}.actionbar__nav-link:hover{background-color:#f3f3f3}.actionbar__nav-icon{width:16px;height:16px;margin-top:12px;fill:#3c4859}.actionbar__burger{display:none}@media (min-width:700px){.actionbar__burger{display:flex}}.social{margin:0;padding:0}.display{display:block;background-color:#fff;height:calc(100vh - 86px);position:absolute;width:100%;top:86px;bottom:0;left:0;right:0;z-index:1}.display__gradientname{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;top:-8px;color:#fff;font-size:20px;margin-top:0;text-align:center;width:300px}.display__footer,.display__gradientname{position:absolute;left:50%;transform:translate3d(-50%,0,0)}.display__footer{bottom:0;font-size:10px;opacity:.5}.display__byline{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#fff;width:300px;text-align:center}.display__byline a{color:inherit;text-decoration:none;border-bottom:1px solid hsla(0,0%,92%,.49)}.hex{display:inline-block;font-family:Source Code Pro,Menlo,Consolas,monospace;font-size:15px;position:relative;cursor:pointer;padding:3px 6px;border-radius:3px;transition:background .2s ease-in-out;display:flex;align-items:center}.hex:hover{background-color:#eceaea}.hex__block{position:relative;margin-right:3px;display:inline-block;width:14px;height:14px;background-color:#eaeaea}.hex__name{margin-left:3px;font-size:14px}.hex__copied{position:absolute;background-color:#eaeaea;padding:3px 5px;font-size:12px;border-radius:3px;margin-left:-27px;bottom:0;left:50%;opacity:1}.hex__arrow{font-size:16px!important;margin-top:2px;color:#767676}.hex__arrow:last-child,.loader{display:none}.loader{position:absolute;z-index:4;background-color:#fff;width:100%;height:100%;top:0;left:0;bottom:0;right:0;justify-content:center;align-items:center}@media (min-width:620px){.loader{display:flex}}.loader__content{text-align:center;max-width:400px}.loader__logo{width:220px;height:60px}.loader__tip{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:19px;line-height:1.4;margin-top:30px;margin-bottom:36px;color:#616161}.loader__spinner{display:inline-block}.nav{list-style-type:none;margin:0;padding:0;position:absolute;top:50%;transform:translate3d(0,-50%,0);display:block;width:100%}.nav:after,.nav:before{clear:both;content:"";display:table}.nav__item{transition:all .2s ease-in-out;display:inline-block;height:100px;width:60px;background-color:hsla(0,0%,100%,.1);cursor:pointer;position:relative}.nav__item:first-child{float:left}.nav__item:last-child{float:right}.nav__item:hover{background-color:hsla(0,0%,100%,.2)}.nav__item:hover .nav__arrow{width:18px}.nav__arrow{width:15px;height:24px;top:50%;position:absolute;margin-top:-9px;fill:#fff;transition:width .2s ease-in-out}.nav__arrow--left{margin-left:16px}.nav__arrow--right{margin-left:24px}.shortlist{list-style-type:none;margin:0;padding:0;justify-content:space-between;background-color:#000;height:70px;padding:0 20px}.shortlist,.shortlist__item{display:flex;align-items:center}.shortlist__item{height:40px;border-radius:3px;flex-basis:9.3%;justify-content:center;box-sizing:border-box;cursor:pointer}.shortlist__item.active{border:2px solid #fafafa}.shortlist__link{display:block;text-decoration:none;color:#fafafa;font-family:Source Code Pro,monospace;font-size:12px}.shortlist__link:hover{text-decoration:underline}.palette{display:block;background-color:#333;height:calc(100vh - 86px);position:absolute;z-index:2;width:100%;top:86px;bottom:0;left:0;right:0;padding-bottom:8px;overflow:scroll;box-sizing:border-box;backface-visibility:hidden;transition:all .25s cubic-bezier(.62,.28,.23,.99);transform:translate3d(0,-100%,0);will-change:transform;opacity:0}.palette.active{transform:translateZ(0);opacity:1}.palette__list{margin:0;padding:0;list-style-type:none;display:flex;flex-wrap:wrap;padding:10px}.palette__list:after,.palette__list:before{clear:both;content:"";display:table}.palette__item{flex:0 1 33.33%;box-sizing:border-box;padding:10px;transition:all .1s ease-in-out;cursor:pointer}.palette__item:hover{background-color:#222;border-radius:3px;transform:scale(1.02)}.palette__item:hover .palette__name{border-bottom:1px solid hsla(0,0%,92%,.49)}.palette__gradient{height:150px;border-radius:3px;display:flex;justify-content:center;align-items:center}.palette__name{text-align:center;color:#fff;margin:0;padding:0;font-family:Source Code Pro,monospace;font-size:15px}.modal__mask{position:fixed;z-index:5;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);transition:opacity .3s ease;display:flex;justify-content:center;align-items:center}.modal__container{width:480px;padding:40px 30px;background-color:#fff;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.33);transition:all .3s ease;text-align:center}.modal__title{font-size:18px;font-weight:600;margin-top:0}.modal__text{font-size:15px;line-height:1.5;margin-bottom:22px}.modal__content{height:105px;background-color:#f9fafc;margin-bottom:20px}.modal__success{height:100%;display:flex;justify-content:center;align-items:center}.modal-enter,.modal-leave-active{opacity:0}.modal-enter .modal__container,.modal-leave-active .modal__container{transform:scale(1.1)}.codeblock{overflow:auto;text-align:left;font-family:Source Code Pro,Consolas,monospace;color:#476da5}.codeblock__comment{color:#ababab!important}.codeblock__property{color:#2aa198!important}.codeblock__spec{color:#d33682!important}.sponsor{align-items:center;text-decoration:none;display:none}@media (min-width:840px){.sponsor{display:flex}}.sponsor:hover .sponsor__cta{transform:translate3d(3px,0,0)}.sponsor__add{width:14px;height:14px;margin:0 8px}.sponsor__logo{width:120px;height:15px;fill:#48a4ab}.sponsor__cta{display:flex;align-items:center;transition:transform .3s ease-in-out;will-change:transform;background-color:#e2e2e2;height:24px;border-radius:50px;padding:0 2px;margin-left:10px}.sponsor__byline{font-size:12px;margin-left:8px;color:#656565;text-decoration:none}.sponsor__arrow{transform:rotate(-90deg);width:21px;height:21px;margin-left:-4px;margin-top:2px;fill:#656565}